<template>
  <div class="validatePage">
    <div class="loginWrap">
      <div class="show"
           v-if="show">
        <p class="loginTitle sendCode">发送验证码</p>
        <p class="code">验证码已发送至
          <span id="tel">{{userTel}}</span>
        </p>
        <div class="loginArea">
          <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__bd">
              <input class="weui-input"
                     type="tel"
                     placeholder="请输入验证码"
                     v-model="code">
            </div>
            <div class="weui-cell__ft">
              <button class="weui-vcode-btn"
                      @click.stop="sendCode"
                      :disabled="disabled">{{codeLatter}}</button>
            </div>
          </div>
          <p class="codeerrorTips"
             v-if="showError"
             :class="{'shake animated':showError }">
            <span>开始</span>
          </p>
          <div class="loginBtn sendLatter">
            <button id="codeBtn"
                    @click.stop='loginIn'>
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      count: 60,
      showError: false,
      timer: null,
      codeLatter: '59s后重发',
      disabled: true,
      disabled2: true,
      disabled3: true,
      disabled4: true,
      disabled5: true,
      disabled6: true,
      focus1: true,
      focus2: false,
      focus3: false,
      focus4: false,
      focus5: false,
      focus6: false,
      show: true,
      showEyes: false,
      type: 'password',
      passwordValue: '',
      showPassword: true,
      userTel: false,
      message: 0,
      str: '',
      code: ''
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    changePasswordType () {
      console.log(123)
      this.showPassword = !this.showPassword
    },
    loginIn () {
      let that = this
      this.$http.post('https://dati.co-links.com/user/check_code/', {
        phone: that.userInfo.phone,
        openid: that.userInfo.openid,
        code: that.code,
        nickName: that.userInfo.nickName,
        avatarUrl: that.userInfo.avatarUrl
      }).then((res) => {
        console.log(res)
        if (res.data.code === '0000') {
          console.log(res.data.data.user_id)
          that.setUserInfo({
            user_id: res.data.data.user_id
          })
          wx.setStorageSync('user_id', res.data.data.user_id)
          wx.reLaunch({
            url: '../index/main'
          })
        } else {
          wx.showModal({
            title: '提示',
            content: res.data.message,
            showCancel: false
          })
        }
      })
    },
    chanegEyes () {
      this.showEyes = true
    },
    countDown () {
      var that = this
      clearInterval(that.timer)
      that.timer = setInterval(function () {
        if (that.count === 1) {
          clearInterval(that.timer)
          console.log('unfinished')
          that.count = 59
          that.codeLatter = '重发'
          that.disabled = false
        } else {
          console.log('count--')
          that.count--
          that.codeLatter = that.count + 's后重发'
        }
      }, 1000)
    },
    sendCode () {
      let that = this
      this.countDown()
      this.codeLatter = this.count + 's后重发'
      this.disabled = true
      this.$http.post('https://dati.co-links.com/user/phone_code/', {
        openid: wx.getStorageSync('openId'),
        phone: that.userTel
      }).then(function (res) {
        console.log(res)
        that.setUserInfo({
          phone: that.userTel
        })
        if (res.data.code === 'u004') {
          that.message = res.data.data
        }
      })
    },
    obCode1 (e) {
      console.log(e)
      if (parseInt(this.code1) >= 0 &&
        parseInt(this.code2) >= 0 &&
        parseInt(this.code3) >= 0 &&
        parseInt(this.code4) >= 0 &&
        parseInt(this.code5) >= 0 &&
        parseInt(this.code6) >= 0) {
        if (parseInt(this.code1) === this.message.substring(0, 1) &&
          parseInt(this.code2) === this.message.substring(1, 2) &&
          parseInt(this.code3) === this.message.substring(2, 3) &&
          parseInt(this.code4) === this.message.substring(3, 4) &&
          parseInt(this.code5) === this.message.substring(4, 5) &&
          parseInt(this.code6) === this.message.substring(5, 6)
        ) {
          console.log('ok')
          this.showError = false
          return false
        } else {
          this.showError = true
        }
      } else {
        if (parseInt(e.mp.detail.value) >= 0) {
          this.focus2 = true
          this.focus1 = false
          this.disabled2 = false
        } else {
          this.focus1 = true
          this.focus2 = false
        }
      }

      console.log(this.focus1)
    },
    test () {
      console.log('test keyup')
    },
    obCode2 (e) {
      if (parseInt(this.code1) >= 0 &&
        parseInt(this.code2) >= 0 &&
        parseInt(this.code3) >= 0 &&
        parseInt(this.code4) >= 0 &&
        parseInt(this.code5) >= 0 &&
        parseInt(this.code6) >= 0) {
        if (parseInt(this.code1) === this.message.substring(0, 1) &&
          parseInt(this.code2) === this.message.substring(1, 2) &&
          parseInt(this.code3) === this.message.substring(2, 3) &&
          parseInt(this.code4) === this.message.substring(3, 4) &&
          parseInt(this.code5) === this.message.substring(4, 5) &&
          parseInt(this.code6) === this.message.substring(5, 6)
        ) {
          // this.show = false
          console.log('ok')
          this.showError = false
          return false
        } else {
          this.showError = true
        }
      } else {
        if (parseInt(e.mp.detail.value) >= 0) {
          this.focus3 = true
          this.focus1 = false
          this.focus2 = false
          this.disabled3 = false
        } else {
          this.focus2 = true
        }
      }
    },
    obCode3 (e) {
      if (parseInt(this.code1) >= 0 &&
        parseInt(this.code2) >= 0 &&
        parseInt(this.code3) >= 0 &&
        parseInt(this.code4) >= 0 &&
        parseInt(this.code5) >= 0 &&
        parseInt(this.code6) >= 0) {
        if (parseInt(this.code1) === this.message.substring(0, 1) &&
          parseInt(this.code2) === this.message.substring(1, 2) &&
          parseInt(this.code3) === this.message.substring(2, 3) &&
          parseInt(this.code4) === this.message.substring(3, 4) &&
          parseInt(this.code5) === this.message.substring(4, 5) &&
          parseInt(this.code6) === this.message.substring(5, 6)
        ) {
          this.showError = false
          return false
        } else {
          this.showError = true
        }
      } else {
        if (parseInt(e.mp.detail.value) >= 0) {
          this.focus4 = true
          this.focus3 = false
          this.disabled4 = false
        } else {
          this.focus3 = true
          console.log(3)
        }
      }
    },
    obCode4 (e) {
      if (parseInt(this.code1) >= 0 &&
        parseInt(this.code2) >= 0 &&
        parseInt(this.code3) >= 0 &&
        parseInt(this.code4) >= 0 &&
        parseInt(this.code5) >= 0 &&
        parseInt(this.code6) >= 0) {
        if (parseInt(this.code1) === this.message.substring(0, 1) &&
          parseInt(this.code2) === this.message.substring(1, 2) &&
          parseInt(this.code3) === this.message.substring(2, 3) &&
          parseInt(this.code4) === this.message.substring(3, 4) &&
          parseInt(this.code5) === this.message.substring(4, 5) &&
          parseInt(this.code6) === this.message.substring(5, 6)
        ) {
          console.log('ok')
          // this.show = false
          this.showError = false
          return false
        } else {
          this.showError = true
        }
      } else {
        if (parseInt(e.mp.detail.value) >= 0) {
          this.focus5 = true
          this.focus4 = false
          this.disabled5 = false
        } else {
          this.focus4 = true
        }
      }
    },
    obCode5 (e) {
      if (parseInt(this.code1) >= 0 &&
        parseInt(this.code2) >= 0 &&
        parseInt(this.code3) >= 0 &&
        parseInt(this.code4) >= 0 &&
        parseInt(this.code5) >= 0 &&
        parseInt(this.code6) >= 0) {
        if (parseInt(this.code1) === this.message.substring(0, 1) &&
          parseInt(this.code2) === this.message.substring(1, 2) &&
          parseInt(this.code3) === this.message.substring(2, 3) &&
          parseInt(this.code4) === this.message.substring(3, 4) &&
          parseInt(this.code5) === this.message.substring(4, 5) &&
          parseInt(this.code6) === this.message.substring(5, 6)
        ) {
          // this.show = false
          console.log('ok')
          this.showError = false
          return false
        } else {
          this.showError = true
        }
      } else {
        if (parseInt(e.mp.detail.value) >= 0) {
          this.focus6 = true
          this.focus5 = false
          this.disabled6 = false
        } else {
          this.focus5 = true
        }
      }
    },
    obCode6 (e) {
      this.focus6 = false
      let that = this
      // yanzheng
      if (parseInt(e.mp.detail.value) >= 0) {
        if (parseInt(this.code1) === this.message.substring(0, 1) &&
          parseInt(this.code2) === this.message.substring(1, 2) &&
          parseInt(this.code3) === this.message.substring(2, 3) &&
          parseInt(this.code4) === this.message.substring(3, 4) &&
          parseInt(this.code5) === this.message.substring(4, 5) &&
          parseInt(this.code6) === this.message.substring(5, 6)
        ) {
          // this.show = false
          this.showError = false
          this.$http.post('https://dati.co-links.com/user/check_code/', {
            phone: that.userInfo.phone,
            openid: that.userInfo.openid,
            // code: ,
            nickName: that.userInfo.nickName,
            avatarUrl: that.userInfo.avatarUrl
          })
          console.log('ok')
          wx.setStorageSync('user_id', 1)
          wx.navigateTo({
            url: '../index/main?check=true'
          })
        } else {
          this.showError = true
          this.focus1 = false
          this.focus2 = false
          this.focus3 = false
          this.focus4 = false
          this.focus5 = false
          this.focus6 = false
          // setTimeout(function () {
          //   that.showError = false
          // }, 200)
        }
      }
    },

    // focusInput1 () {
    //   this.focus1 = true
    //   this.focus2 = false
    //   this.focus3 = false
    //   this.focus4 = false
    //   this.focus5 = false
    //   this.focus6 = false
    // },
    // focusInput2 () {
    //   this.focus2 = true

    //   this.focus1 = false
    //   this.focus3 = false
    //   this.focus4 = false
    //   this.focus5 = false
    //   this.focus6 = false
    // },
    // focusInput3 () {
    //   this.focus3 = true

    //   this.focus1 = false
    //   this.focus2 = false
    //   this.focus4 = false
    //   this.focus5 = false
    //   this.focus6 = false
    // },
    // focusInput4 () {
    //   this.focus4 = true

    //   this.focus1 = false
    //   this.focus2 = false
    //   this.focus3 = false
    //   this.focus5 = false
    //   this.focus6 = false
    // },
    // focusInput5 () {
    //   this.focus5 = true
    //   this.focus1 = false
    //   this.focus2 = false
    //   this.focus3 = false
    //   this.focus4 = false
    //   this.focus6 = false
    // },
    // focusInput6 () {
    //   this.focus6 = true

    //   this.focus1 = false
    //   this.focus2 = false
    //   this.focus3 = false
    //   this.focus4 = false
    //   this.focus5 = false
    // },
    focused2 () {
      // this.focus2 = true
    }
  },
  mounted () {
    this.countDown()
    this.message = this.$mp.query.message
    this.userTel = this.$mp.query.tel
  }
}
</script>
<style>
body,
html {
  width: 100%;
  height: 100%;
}
.loginWrap {
  width: 100%;
  height: 100%;
  /* background-image: url("../images/login.jpg"); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.loginWrap .loginZoom,
.loginWrap .fillPassword {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.loginTitle {
  font-size: 0.38rem;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 1.4rem 0;
  background: #00cc75;
}
.loginArea {
  margin: 0 0.76rem;
}
.loginInput {
  position: relative;
  height: 0.8rem;
}
#androidDialog1 {
  display: none;
}
.loginArea {
  margin-top: 0.65rem;
}
.loginArea input {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.3rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  font-size: 0.34rem;
  border: none;
  outline: none;
}
.loginInput input {
  background: rgba(255, 255, 255, 0.9);
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
  font-size: 0.3rem;
}
.loginInput .errorTips {
  position: absolute;
  right: 0.6rem;
  top: 0;
  height: 100%;
  padding-right: 0.6rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/errorTips.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.3rem 0.3rem;
  font-size: 0.24rem;
  color: #e83328;
  line-height: 0.8rem;
  display: none;
}
.loginInput .eyes {
  position: absolute;
  right: 0.3rem;
  top: 0;
  height: 100%;
  width: 0.68rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/eyes2.png');
  background-size: 0.38rem 0.24rem;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
.loginBtn {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.3rem;
}
.loginBtn input,
.loginBtn button {
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.34rem;
  color: #ffffff;
  background: linear-gradient(to right, #04c373 0%, #00e999 100%);
}
.loginArea input {
}
.loginTips {
  text-align: center;
  font-size: 0.24rem;
  color: white;
  margin-top: 0.2rem;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.code {
  text-align: center;
  font-size: 32rpx;
  color: #000;
  padding-top: 0.13rem;
}
.sendCode {
  font-weight: normal;
}
.loginArea .codeArea {
  text-align: center;
}
.loginArea .codeArea input {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.13rem;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 0.1rem;
  text-align: center;
}
.codeerrorTips {
  text-align: center;
  padding-top: 0.2rem;
  /* display: none; */
}
.codeerrorTips span {
  display: inline-block;
  position: relative;
  font-size: 0.24rem;
  color: #000;
  padding-left: 0.5rem;
}
.codeerrorTips span:before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  margin-top: -0.15rem;
  width: 0.3rem;
  height: 0.3rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/errorTips.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.3rem 0.3rem;
}
.codeerrorTips span.noTips:before {
  width: 0;
}
.setPassword {
}
.fillPassword {
  display: none;
}
.forgetPassword {
  font-size: 0.24rem;
  color: white;
  text-align: center;
  padding-top: 0.2rem;
}
.forgetPassword a {
  color: white;
}
.weui-cell_vcode {
  box-shadow: 0 6rpx 10rpx #ccc;
}
.weui-cell {
  padding: 8rpx 30rpx;
}
</style>
